Title: Adding the Breadcrumbs to Storefront Without WooCommerce

Publish Date: Wed, 15 Feb 2017 09:00:00 +0000

Categories: Uncategorized

Content:

If you, like me, are using [ablank href="https://woocommerce.com/storefront/"]Storefront[/ablank] without using [ablank href="https://woocommerce.com/"]WooCommerce[/ablank], then you probably noticed that the breadcrumbs are not included by default.

This is because Storefront uses WooCommerce functions to print the breadcrumbs, before the content. But there’s another way to have that, with the plugin [ablank href="https://wordpress.org/plugins/wordpress-seo/"]Yoast SEO[/ablank].



Add the Necessary Code

Make sure to install [ablank href="https://wordpress.org/plugins/wordpress-seo/"]Yoast SEO[/ablank] on your site. You can also write the breadcrumbs code by yourself if you want, and use that, but I think it’s just easier and faster to use the breadcrumbs included in this plugin.

Once you installed and activated Yoast SEO, add this code to your functions.php file in wp-content/themes/your-child-theme-name/ at the end of the file:

https://gist.github.com/SiR-DanieL/723cd5d65b19a0e9a78bb1e4341c1169

Then, add this style in Customizer > Additional CSS or by using your preferred method to add custom CSS:

https://gist.github.com/SiR-DanieL/18bf98cf77140d51711dc0aa2140367e

This will show the breadcrumbs on any page, except the Home page, and it will show like the one that you can see in the [ablank href="http://demo.woothemes.com/storefront/shop/"]Storefront demo site[/ablank].

Note: I chose to not show the breadcrumbs on the Home page because I don't think it's useful, but if for any reason you want to show it, just remove the part && ! is_home() from the PHP script to show it also on the Home.

Activate the Breadcrumbs in Yoast SEO

Once the code is ready, you need to activate the breadcrumbs in Yoast SEO, and you can do so by going to SEO > Advanced > Breadcrumbs in your Dashboard.
